<template>
	<view class="zero-item" @tap="buyProduct">
		<view class="img-box">
			<image class="image" :src="item.pic" alt="" />
			<view class="surplus-num">
				<text class="iconfont icon-remenwenti"></text>
				还剩{{ item.receiveStatus === 2 ? 0 : item.surplus }}件
			</view>
			<view class="mask" v-if="item.surplus === 0 || item.receiveStatus === 2">
				<view class="circular-wrap">
					<view class="circular-inner">已抢完</view>
				</view>
			</view>
		</view>
		<view class="goods-content">
			<text class="goods-name">
				<image v-if="item.shoptype == 1" class="shop-logo" src="@/static/icons/tmall.png" />
				<image v-else class="shop-logo" src="@/static/icons/taobao.png" />
				{{ item.title }}
			</text>
			<view class="coupon">
				领{{ item.couponMoney }}元券+返款{{ Number(item.mdMoney) }}元
			</view>
			<view class="footer">
				<view class="price">
					<view class="end-price">
						<text class="symbol">¥</text>
						<text>{{ (Number(item.endPrice) - Number(item.mdMoney)) | Fixed(2) }}</text>
						<text class="end-text">到手价</text>
					</view>
					<view class="original">¥{{ Number(item.price) }}</view>
				</view>
				<view class="product-buy" @tap="buyProduct">
					返款后{{ (Number(item.endPrice) - Number(item.mdMoney)) | Fixed(2) }}元购
					<!-- <text class="iconfont icon-xiayiye"></text> -->
				</view>
			</view>
		</view>

		<!--授权弹窗-->
		<authorize ref="authorize"></authorize>
	</view>
</template>

<script>
	import moment from '@/utils/packges/moment';
	import PropBox from '@/components/PropBox';
	import Authorize from '@/components/Authorize';
	import CountDown from '@/components/uni/CountDown';
	import Popup from '@/components/uni/Popup';
	const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');

	import {
		mapGetters
	} from 'vuex';

	export default {
		name: 'zero-item',
		components: {
			PropBox,
			Authorize,
			CountDown,
			Popup
		},
		props: {
			item: {
				type: Object
			},
			newPerson: {
				type: Number
			},
			type: {
				type: String
			}
		},
		data() {
			return {
				isShowDialog: false,
				visible: false,
				visibleComfirm: false,
				tkl: null,
				couponEndtime: 0,
				countdown: [], //倒计时数组
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			buyProduct() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/common/login',
						animationType: 'slide-in-bottom',
						animationDuration: 300
					});
					return false;
				}
				if ((this.item.surplus === 0 || this.item.receiveStatus === 2 || this.item.receiveStatus === 1 || this.item.receiveStatus ===
						3) && this.item.hasBuy === 0) {
					uni.showToast({
						title: '已抢完',
						icon: 'none'
					})
					return false;
				}
				
				if (this.userInfo.tbStatus === 1) {
					uni.showLoading({
						title: '正在打开淘宝...'
					})
					setTimeout(() => {
						uni.hideLoading()
					}, 5000)
					let params = {
						title: this.item.title,
						itemId: this.item.gid,
						id: this.item.id,
					};
					this.$service.shopping.goods
						.buyBackGoods(params)
						.then(res => {
							Alibcsdk.init(initResult => {
								if (initResult.status) {
									Alibcsdk.openurl(
										{
											url: res
										},
										result => {}
									);
								} else {
									uni.showToast({
										title: '初始化失败'
									});
								}
							});
						})
						.catch(error => {
							uni.showToast({
								title: error.message,
								icon: 'none'
							});
						});
				} else {
					if (this.userInfo.tbStatus === 2) {
						uni.showToast({
							title: '亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！',
							icon: 'none'
						});
					}
					if (this.userInfo.tbStatus === 3) {
						uni.showToast({
							title: '授权过期，请重新授权',
							icon: 'none'
						});
					}
					this.$refs.authorize.open();
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.zero-item {
		width: 100%;
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 auto 20rpx;
		position: relative;

		.img-box {
			width: 240rpx;
			height: 240rpx;
			position: relative;
			
			border-radius: 20rpx;
			overflow: hidden;

			.image {
				max-width: 100%;
				max-height: 100%;
				border-radius: 16rpx;
			}
			
			.surplus-num {
				position: absolute;
				left: 0;
				top: 0; 
				padding: 0rpx 16rpx;
				color: #fff;
				border-radius: 24rpx 0 24rpx 0;
				background: linear-gradient(to bottom, #FF6465, #FF2636);
				.icon-remenwenti {
					font-size: 26rpx;
					margin-right: 4rpx;
				}
			}

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.2);
				@include flexBox(center, center);

				.circular-wrap {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.3);
					transform: rotate(-24deg);
					@include flexBox(center, center);

					.circular-inner {
						width: 90rpx;
						height: 86rpx;
						border: 2rpx solid $color-white;
						border-radius: 50%;
						font-size: 18rpx;
						color: $color-white;
						@include flexBox(center, center);
					}
				}
			}
		}

		.goods-content {
			height: 240rpx;
			flex: 1;
			overflow: auto;
			padding-left: 30rpx;

			@include flexBox(space-between, null, column);

			.goods-name {
				text-align: left;
				color: $text-black;
				font-size: 28rpx;
				@include ellipsis(2);
				.shop-logo {
					height: 36rpx;
					width: 36rpx;
					position: relative;
					top: 8rpx;
					right: 5rpx;
				}
			}

			.coupon {
				width: fit-content;
				padding: 2rpx 18rpx;
				position: relative;
				border-radius: 4rpx;
				font-size: 24rpx;
				border-radius: 50rpx;
				color: #fff;
				color: #F70114;
				background: #FFE6E6;

				.left {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50rpx;
					background: #fff;
					position: absolute;
					left: -6rpx;
					top: 50%;
					margin-top: -6rpx;
				}

				.right {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50rpx;
					background: #fff;
					position: absolute;
					right: -6rpx;
					top: 50%;
					margin-top: -6rpx;
				}
			}
			
			.footer {
				@include flexBox(space-between, flex-end)
				.price {
					@include flexBox(flex-start, flex-start, column);
				
					.end-price {
						color: #F70114;
						font-size: 36rpx;
						display: flex;
						font-weight: 600;
						align-items: baseline;
				
						.symbol {
							font-size: 28rpx;
						}
				
						.end-text {
							font-size: 24rpx;
							margin-left: 10rpx;
							font-weight: 500;
						}
					}
				
					.original {
						color: #B5B5B5;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
				
				.product-buy {
					background: linear-gradient(90deg, #FF484A, #FF5049);
					border-radius: 50rpx;
					color: #fff;
					font-size: 24rpx;
					padding: 4rpx 14rpx 4rpx 14rpx;
					.iconfont {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
